<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css" >
        /*居中及美化*/
        body{border:0px; margin:0px;margin-top:50px; padding:0px; font-size:12px; background-color:#ccc;}
        div{border:0px;}
        img{border:0px;}
        button{margin:5px;width:150px;}
        body{
            TEXT-ALIGN: center;
        }
        #top{
            MARGIN-RIGHT: auto;
            MARGIN-LEFT: auto;
        }
        #draw{
            MARGIN-RIGHT: auto;
            MARGIN-LEFT: auto;
        }
        #cheat{
            MARGIN-RIGHT: auto;
            MARGIN-LEFT: auto;
        }
        #des,#countTime{
            MARGIN-RIGHT: auto;
            MARGIN-LEFT: auto;
            font-size : 1.5em;
            color: #fafafa;
            letter-spacing: 0;
            text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 ;

        }
        #setbombleve{
            MARGIN-RIGHT: auto;
            MARGIN-LEFT: auto;
        }
        .setbomblevel{
            MARGIN-RIGHT: auto;
            MARGIN-LEFT: auto;
        }
        #setDegree{
            visibility:hidden;
        }
        .button {
            display: inline-block;
            zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
            *display: inline;
            vertical-align: baseline;
            margin: 0 2px;
            outline: none;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            font: 14px/100% Arial, Helvetica, sans-serif;
            padding: .5em 2em .55em;
            text-shadow: 0 1px 1px rgba(0,0,0,.3);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
            box-shadow: 0 1px 2px rgba(0,0,0,.2);
        }
        .button:hover {
            text-decoration: none;
        }
        .button:active {
            position: relative;
            top: 1px;
        }
    </style>

    <script type="text/javascript" language="JavaScript">
        /*美化alert*/
        window.alert = function(str){
            var shield = document.createElement("DIV");
            shield.id = "shield";
            shield.style.position = "absolute";
            shield.style.left = "0px";
            shield.style.top = "0px";
            shield.style.width = "100%";
            shield.style.height = document.body.scrollHeight+"px";
            //弹出对话框时的背景颜色
            shield.style.background = "#fff";
            shield.style.textAlign = "center";
            shield.style.zIndex = "25";
            //背景透明 IE有效
            //shield.style.filter = "alpha(opacity=0)";
            var alertFram = document.createElement("DIV");
            alertFram.id="alertFram";
            alertFram.style.position = "absolute";
            alertFram.style.left = "50%";
            alertFram.style.top = "50%";
            alertFram.style.marginLeft = "-225px";
            alertFram.style.marginTop = "-75px";
            alertFram.style.width = "450px";
            alertFram.style.height = "150px";
            alertFram.style.background = "#ff0000";
            alertFram.style.textAlign = "center";
            alertFram.style.lineHeight = "150px";
            alertFram.style.zIndex = "300";
            strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
            strHtml += " <li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">[自定义提示]</li>\n";
            strHtml += " <li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">"+str+"</li>\n";
            strHtml += " <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" onclick=\"doOk()\" /></li>\n";
            strHtml += "</ul>\n";
            alertFram.innerHTML = strHtml;
            document.body.appendChild(alertFram);
            document.body.appendChild(shield);
            //var ad = setInterval("doAlpha()",5);
            this.doOk = function(){
                alertFram.style.display = "none";
                shield.style.display = "none";
            }
            alertFram.focus();
            document.body.onselectstart = function(){return false;};
        }

    </script>

</head>
<body>
    <!--导入几个工具包,helper.js中的代码可从老师的推箱子中copy过来，牛B的同学也可以自己定义-->
    <script type="text/javascript" src="sources/BombCell.js"></script>
    <script type="text/javascript" src="sources/helper.js"></script>
    <script type="text/javascript" src="sources/game.js"></script>
    <script type="text/javascript" language="JavaScript">
        //初始化游戏界面
        var item1=dom("INPUT",{id:"startGame",class:"button",type:'button',value:'start Game'});
        var item2=dom("INPUT",{id:"resetLevel",class:"button",type:'button',value:'Reset Level'})
        var menu=dom("DIV",{id:"top"},item1,item2,dom("BR",null));
        document.body.appendChild(menu);
        //通过构造函数，创建一个对象
        var g=new Game();

    </script>
    <!--建议用Javascript动态生成，本人能力有限，试了几次失败了-->
    <div  id="setDegree">
        <fieldset id="fieldsetManage" class="divManageArea">
            <legend>&nbsp;排雷设置&nbsp;</legend>
            <div class="setbomblevel">
                <div class="divLevelClass" title="简单 9×9 10个雷">
                    <input type="radio" name="levels" id="level1" value="1" checked /><label for="level1">简单【09×09】【 10雷】</label>
                </div>
                <div class="divLevelClass" title="正常 16×16 40个雷">
                    <input type="radio" name="levels" id="level2" value="2"/><label for="level2">正常【16×16】【 40雷】</label>
                </div>
                <div class="divLevelClass" title="困难 16×30 99个雷">
                    <input type="radio" name="levels" id="level3" value="3"/><label for="level3">困难【16×30】【 99雷】</label>
                </div>
                <div class="divLevelClass" title="做死 16×30 150个雷">
                    <input type="radio" name="levels" id="level4" value="4"/><label for="level4">做死【16×30】【150雷】</label>
                </div>
                <div class="divLevelClass" title="自定义">
                    <span class="span_custText">
                        <input type="radio" name="levels" id="level5" value="5"/><label for="level5">自定义</label>
                    </span>
                    <span id="divCustomer" class="divCust">
                        【<input type="text" id="txtRows" value="9" title="行数" style="width:30px;" />×
                        <input type="text" id="txtCols" value="9" title="列数" style="width:30px;" />】
                        【<input type="text" id="txtBombs" value="10" title="雷数" style="width:30px;" />雷】
                    </span>
                </div>
                <div class="divLevelClass">
                    <input type="button" name="levels" id="save" value="保存" onclick=""/>
                </div>
            </div>
        </fieldset>
    </div>


</body>
</html>